<template>
<div class="store-type views-container">
  <div class="store-type-header flex-row flex-justify-c">请选择需要创建的平台类型</div>
  <div class="store-type-content flex-row flex-justify-c">
    <div class="store-type-box flex-col flex-justify-c flex-align-c">
      <img class="free" src="@/assets/store/free.png" alt="">
      <img class="store-type-img" src="http://we7.weliam.cn/attachment/wx61b7350b8f550d0f/avatar.jpg" alt="">
      <div class="store-type-title">商城</div>
      <div class="store-type-text">提供线下线上，物流，配送一体化服务</div>
      <el-button size="medium" plain type="primary">立即开店</el-button>
    </div>
    <div class="store-type-box flex-col flex-justify-c flex-align-c">
      <img class="store-type-img" src="http://we7.weliam.cn/attachment/wx61b7350b8f550d0f/avatar.jpg" alt="">
      <div class="store-type-title">商城</div>
      <div class="store-type-text">提供线下线上，物流，配送一体化服务</div>
      <el-button size="medium" plain type="primary">立即开店</el-button>
    </div>
    <div class="store-type-box flex-col flex-justify-c flex-align-c">
      <img class="store-type-img" src="http://we7.weliam.cn/attachment/wx61b7350b8f550d0f/avatar.jpg" alt="">
      <div class="store-type-title">商城</div>
      <div class="store-type-text">提供线下线上，物流，配送一体化服务</div>
      <el-button size="medium" plain type="primary">立即开店</el-button>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: 'StoreType',
  components: {

  },
  data() {
    return {

    }
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.store-type {
  .store-type-header {
    font-size: 30px;
    color: #333;
    font-weight: lighter;
    margin: 40px;
  }

  .store-type-content {
    padding: 30px;
    flex-wrap: wrap;
  }

  .store-type-box {
    border-radius: 4px;
    background: #ffffff;
    padding: 40px 30px;
    margin: 0 20px 20px 0;
    font-size: 14px;
    width: 270px;
    height: 380px;
    position: relative;
  }

  .store-type-box:hover {
    box-shadow: 0 5px 5px #ebebeb;
  }

  .store-type-img {
    height: 90px;
    width: 90px;
    border-radius: 90px
  }

  .store-type-title {
    font-size: 20px;
    margin: 25px 0 20px;
    color: #4f4f4f;
  }

  .store-type-text {
    margin-bottom: 40px;
    text-align: center;
    line-height: 24px;
    font-size: 14px;
    color: #8a8a8a;
  }

  .free {
    position: absolute;
    right: 0;
    top: 0;
    width: 60px;
    height: 61px;
    background-position: 50%;
    background-repeat: no-repeat;
  }
}
</style>
